<script>
    import {sendTextAction,writeTextAction} from '../vuex/actions'
    export default {
        props: ['session'],
        computed: {
            message: {
                get () {
                    return this.text
                },
                set (val) {
                    this.writeTextAction(val)
                }
            }
        },
        methods: {
            inputing (e) {
                if (e.ctrlKey && e.keyCode === 13 && this.text.length) {
                    this.sendTextAction(this.text,this.sessionIndex)
                }
            }
        },
        vuex:{
            getters:{
                sessionList :  ({sessionList}) => sessionList.items,
                sessionIndex : ({sessionList}) => sessionList.sessionIndex,
                text:({sessionList}) => sessionList.text,
            },
            actions:{
                sendTextAction,
                writeTextAction
            }
        }
    };
</script>

<template>
    <div class="m-text">
        <textarea placeholder="按 Ctrl + Enter 发送" v-model="message" @keyup="inputing"></textarea>
    </div>
</template>

<style lang="less">
    .m-text {
        height: 160px;
        border-top: solid 1px #ddd;
        
        textarea {
            padding: 10px;
            height: 100%;
            width: 100%;
            border: none;
            outline: none;
            font-family: "Micrsofot Yahei";
            resize: none;
        }
    }
</style>